<template>
  <div class="cascader">
    <!-- 显示已选择的路径 -->
    <div class="cascader-input" @click="toggleDropdown">
      <span v-if="selectedLabels.length">{{ selectedLabels.join(" / ") }}</span>
      <span v-else class="placeholder">请选择</span>
    </div>

    <!-- 下拉菜单 -->
    <div v-if="showDropdown" class="cascader-dropdown">
      <div
        class="cascader-panel"
        v-for="(levelOptions, level) in panels"
        :key="level"
      >
        <div
          class="cascader-option"
          v-for="option in levelOptions"
          :key="option.value"
          :class="{ active: isActive(option, level) }"
          @click="handleSelect(option, level)"
        >
          {{ option.label }}
          <span v-if="option.children" class="arrow">▶</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";

const emit = defineEmits(["update:modelValue"]);

// 当前已选择的路径（存放 option 对象）
const selectedPath = ref([]);

watch(selectedPath, () => {
  const values = selectedPath.value.map((item) => item.value);
  emit("update:modelValue", values);
});

// props：外部传入的选项数据
const props = defineProps({
  options: {
    type: Array,
    required: true,
  },
});

// 是否展开下拉
const showDropdown = ref(false);

// 计算：已选择的 label 路径
const selectedLabels = computed(() => selectedPath.value.map((o) => o.label));

// 计算：每一级要展示的 options
const panels = computed(() => {
  if (selectedPath.value.length === 0) {
    return [props.options];
  }
  const result = [props.options];
  console.log(result);

  let current = props.options;
  console.log(current);

  for (const item of selectedPath.value) {
    const found = current.find((o) => o.value === item.value);
    if (found && found.children) {
      result.push(found.children);
      current = found.children;
    }
  }
  return result;
});

// 切换展开/收起
function toggleDropdown() {
  showDropdown.value = !showDropdown.value;
}

// 点击选择某个选项
function handleSelect(option, level) {
  console.log("选择了：", option, "级别：", level);

  // 截断已有路径,保证当用户在某一级重新选择时，清除该级之后的所有旧选择，避免路径出现错乱。
  selectedPath.value = selectedPath.value.slice(0, level);
  selectedPath.value[level] = option;

  // 如果没有子节点，说明选择完成，收起下拉
  if (!option.children) {
    showDropdown.value = false;
  }
}

// 判断某个 option 是否被选中
function isActive(option, level) {
  return selectedPath.value[level]?.value === option.value;
}
</script>

<style scoped>
.cascader {
  position: relative;
  width: 300px;
  font-family: sans-serif;
}

.cascader-input {
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.placeholder {
  color: #aaa;
}

.cascader-dropdown {
  position: absolute;
  top: 110%;
  left: 0;
  display: flex;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.cascader-panel {
  min-width: 120px;
  max-height: 200px;
  overflow-y: auto;
  border-right: 1px solid #eee;
}

.cascader-option {
  padding: 6px 12px;
  cursor: pointer;
}

.cascader-option:hover {
  background: #f5f5f5;
}

.cascader-option.active {
  background: #409eff;
  color: #fff;
}

.arrow {
  float: right;
  font-size: 12px;
}
</style>
